<template>
  <el-container class="layout-container">
    <!-- 顶部导航栏 -->
    <el-header height="60px" class="header">
      <div class="logo-container">
        <img src="@/assets/logo.png" alt="Logo" class="logo-img">
        <span class="work-name">可多工作室</span>
        <span class="divider">|</span>


        <!-- 面包屑导航 - 添加在logo和时间中间 -->
        <el-breadcrumb-item :to="{ path: '/e2' }">首页</el-breadcrumb-item>
        <el-breadcrumb separator="/" class="breadcrumb">
          <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
            <span v-if="index === 0">
              <i class="el-icon-s-home"></i> {{ item.meta.shortTitle || item.meta.title }}
            </span>
            <span v-else>
              {{ item.meta.title }}
            </span>
          </el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 日期时间 ························-->
        <span class="date-time">
          <span class="date">日期：{{ currentDate }}</span>
          <span class="time">时间：{{ currentTime }}</span>
        </span>


      </div>
    </el-header>

    <el-container>
      <!-- 动态宽度侧边栏 -->
      <el-aside :width="sidebarWidth" class="sidebar">
        <!-- 折叠按钮（使用el-button确保图标显示） -->
        <el-button class="collapse-btn" :class="{ 'collapsed': isCollapsed }" @click="toggleCollapse"
          :icon="isCollapsed ? 'ArrowRight' : 'ArrowLeft'" circle size="small" />
        <!-- 导航------------------------------------------------------------------------------------------------------ -->
        <el-menu :default-active="activeIndex" background-color="#f5f1f0" text-color="#5a4a42" active-text-color="#8b7355"
          :collapse="isCollapsed" :collapse-transition="true" router>
          <!-- 工作台 -->
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <Monitor />
              </el-icon>
              <span>工作台</span>
            </template>
            <el-menu-item index="/e2">
              <el-icon>
                <DataLine />
              </el-icon>
              <span>数据看板</span>
            </el-menu-item>
            <el-menu-item index="/e2/quickaction">
              <el-icon>
                <Lightning />
              </el-icon>
              <span>快捷操作</span>
            </el-menu-item>
          </el-sub-menu>

          <!-- 订单管理 -->
          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <Document />
              </el-icon>
              <span>订单管理</span>
            </template>

            <el-menu-item index="/e2/orders/list">
              <el-icon>
                <Tickets />
              </el-icon>
              <span>订单目录</span>
            </el-menu-item>
            <el-menu-item index="/e2/orders/create">
              <el-icon>
                <Plus />
              </el-icon>
              <span>订单创建</span>
            </el-menu-item>
            <el-menu-item index="/e2/orders/stats">
              <el-icon>
                <DocumentCopy />
              </el-icon>
              <span>订单统计</span>
            </el-menu-item>
          </el-sub-menu>

          <!-- 客户管理 -->
          <el-sub-menu index="3">
            <template #title>
              <el-icon>
                <User />
              </el-icon>
              <span>客户管理</span>
            </template>
            <el-menu-item index="/e2/customers/list">
              <el-icon>
                <Avatar />
              </el-icon>
              <span>客户列表</span>
            </el-menu-item>
            <el-menu-item index="/e2/customers/stats">
              <el-icon>
                <TrendCharts />
              </el-icon>
              <span>客户TOP</span>
            </el-menu-item>
          </el-sub-menu>

          <!-- 产品管理 -->
          <el-sub-menu index="4">
            <template #title>
              <el-icon>
                <Box />
              </el-icon>
              <span>产品管理</span>
            </template>
            <el-menu-item index="/e2/products/list">
              <el-icon>
                <Collection />
              </el-icon>
              <span>产品目录</span>
            </el-menu-item>
            <el-menu-item index="/e2/products/stats">
              <el-icon>
                <PieChart />
              </el-icon>
              <span>产品分析</span>
            </el-menu-item>
          </el-sub-menu>
          
          <!-- 员工管理 -->
          <el-sub-menu index="5">
            <template #title>
              <el-icon>
                <UserFilled />
              </el-icon>
              <span>员工管理</span>
            </template>
            <el-menu-item index="/e2/employees/list">
              <el-icon>
                <Notebook />
              </el-icon>
              <span>员工列表</span>
            </el-menu-item>
            <el-menu-item index="/e2/employees/task">
              <el-icon>
                <Calendar />
              </el-icon>
              <span>任务看板</span>
            </el-menu-item>
          </el-sub-menu>

          <!-- 财务管理 -->
          <!-- <el-sub-menu index="6">
            <template #title>
              <el-icon>
                <Money />
              </el-icon>
              <span>财务管理</span>
            </template>
            <el-menu-item index="/e2/finance/reports">
              <el-icon>
                <DocumentCopy />
              </el-icon>
              <span>财务报表</span>
            </el-menu-item>

          </el-sub-menu> -->

          <!-- 系统设置 -->
          <el-sub-menu index="7">
            <template #title>
              <el-icon>
                <Setting />
              </el-icon>
              <span>设置</span>
            </template>
            <el-menu-item index="/e2/setting/account">
              <el-icon>
                <CreditCard />
              </el-icon>
              <span>账户设置</span>
            </el-menu-item>
          </el-sub-menu>


        </el-menu>
        <!-- ---------------------------------------------------------------------------------------------------- -->
      </el-aside>

      <!-- 主内容区 -->
      <el-main class="main-content">
        <div class="content-wrapper">
          <router-view v-slot="{ Component }">
            <transition name="fade" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>
 
<script>
import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useDateTime } from '@/utils/timeUtils/DateTime'
import authStore from '@/model/authstore'
import router from '@/router'
import { ElMessage } from 'element-plus'

export default {
  name: 'MainLayout',
  setup() {
    const route = useRoute()

    // 响应式状态 
    const breadcrumbList = ref([])
    const activeIndex = ref('/home/dashboard')
    const isCollapsed = ref(false)
    const timeInterval = ref(null)
    const { currentDate, currentTime } = useDateTime({})

    // 计算属性
    const sidebarWidth = computed(() => {
      return isCollapsed.value ? '64px' : '220px'
    })

    // 方法
    const toggleCollapse = () => {
      isCollapsed.value = !isCollapsed.value
      localStorage.setItem('sidebarCollapsed', isCollapsed.value)
    }

    const autoCollapseOnMobile = () => {
      if (window.innerWidth < 800) {
        isCollapsed.value = true
      }
    }

    const getBreadcrumb = () => {
      // 过滤有效路由记录 
      let matched = route.matched.filter(
        item => item.meta && item.meta.title && !item.meta.hidden
      )

      // 构造面包屑数据 
      if (matched.length > 0) {
        // 首页使用shortTitle（如"财务"）
        const home = {
          path: '/e2',
          meta: {
            title: matched[0].meta.shortTitle,
            shortTitle: matched[0].meta.shortTitle
          }
        }

        // 其他层级保持原样
        breadcrumbList.value = [home, ...matched]
      } else {
        // 默认首页
        breadcrumbList.value = [{
          path: '/e2',
          meta: { title: '首页', shortTitle: '首页' }
        }]
      }
    }

    // 生命周期 
    onMounted(() => {
      activeIndex.value = route.path
      autoCollapseOnMobile()

      if (!authStore.isAuthenticated) {
        router.replace('Cloign ')
        ElMessage.error("请登录，您本次非法行为将记录在案")
      }
      


      // 从本地存储恢复状态
      const savedState = localStorage.getItem('sidebarCollapsed')
      if (savedState !== null) {
        isCollapsed.value = savedState === 'true'
      }
    })

    onBeforeUnmount(() => {
      if (timeInterval.value) {
        clearInterval(timeInterval.value)
      }
      window.removeEventListener('resize', autoCollapseOnMobile)
    })

    // 监听器 
    watch(() => route.path, (newPath) => {
      activeIndex.value = newPath
      getBreadcrumb()
    }, { immediate: true })

    // 返回模板可用的属性和方法 
    return {
      breadcrumbList,
      currentDate,
      currentTime,
      activeIndex,
      isCollapsed,
      sidebarWidth,
      toggleCollapse
    }
  }
}
</script>
 
<style scoped>
/* 整体布局 */
.layout-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f9f7f5;
}

.breadcrumb {
  position: relative;
  top: 1px;
}

/* 顶部导航栏 */
.header {
  position: relative;
  background-color: #e8e1d9;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #d3c8b8;
  color: #5a4a42;
}

.logo-container {
  display: flex;
  align-items: center;
  font-size: 14px;
  width: 100%;
}

.logo-img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  filter: brightness(0.8);
}

.work-name {
  font-weight: bold;
  margin-right: 10px;
  color: #5a4a42;
  white-space: nowrap;
}

.divider {
  font-size: 20px;
  opacity: 0.4;
  margin: 0 10px;
  color: #a89f94;
}

.date-time {
  margin-left: auto;
  font-family: 'Courier New', monospace;
  color: #7a6b5f;
  display: flex;
  gap: 15px;
}

/* 折叠按钮----------------------------------------------------- */
.collapse-btn {
  width: 20px;
  height: 100px;
  position: absolute;
  /* left: 200px; */
  left: 91%;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(92, 39, 39, 0.3);
  border: 1px solid #d3c8b8;
  border-radius: 10px 0px 0px 10px !important;
  color: #5a4a42;
  z-index: 10;

  padding: 0 !important;
  transition: all 0.3s ease;
}

.collapse-btn.collapsed {
  left: 45px;
}

.collapse-btn:hover {
  background-color: rgba(92, 39, 39, 0.5);
}

/* 侧边栏 */
.sidebar {
  background-color: #f5f1f0;
  border-right: 1px solid #e0d9d2;
  transition: width 0.3s ease;
  /* height: 100%; */
  /* height: calc(100vh - 0px); ******** */
  height: calc(100vh - 60px);
  position: relative;
  /* position: absolute; */

  overflow-x: hidden;
}

/* 菜单项样式 ---一级导航*/
:deep(.el-menu) {
  border-right: none !important;
}

:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
  height: 50px;
  line-height: 50px;
  transition: all 0.3s;

}

:deep(.el-menu-item) {

  margin-left: 5px;
}

:deep(.el-menu-item) .el-icon {
  margin-left: 55px;
}

:deep(.el-menu-item:hover),
:deep(.el-sub-menu__title:hover) {
  background-color: #ebe6e1 !important;
}

:deep(.el-menu-item.is-active) {
  background-color: #f0e9e0 !important;
  border-left: 3px solid #c4b6a1;
  color: #8b7355 !important;
}

/* 折叠状态样式 */
:deep(.el-menu--collapse) .el-sub-menu__title span,
:deep(.el-menu--collapse) .el-menu-item span {
  display: none;
}

:deep(.el-menu--collapse) .el-sub-menu__title .el-sub-menu__icon-arrow {
  display: none;
}

/* 图标样式 */
.iconfont {
  font-size: 18px;
  margin-right: 8px;
  color: #8b7d6b;
}

/* 主内容区 */
.main-content {
  background-color: #ffffff;
  padding: 20px;
  color: #5a4a42;
  border-left: 1px solid #eee;
  overflow-y: auto;
  height: calc(100vh - 60px);
}

.content-wrapper {

  margin: 0 auto;
}

/* 二级菜单缩进 */
:deep(.el-menu--inline) {
  background-color: #faf8f6 !important;
}

:deep(.el-menu--inline .el-menu-item) {
  padding-left: 0px !important;
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 响应式调整 */
@media (max-width: 700px) {
  .header {
    padding: 0 15px;
  }

  .work-name,
  .divider {
    display: none;
  }

  .date-time {
    font-size: 12px;
    gap: 8px;

  }

}



/* 在style部分添加media响应式调整22222222222222222222222222222222222222 */
@media(max-width: 700px) {


  .sidebar {
    overflow-y: hidden;
    height: 100vh
  }

  :deep(.el-aside) {
    width: 64px !important;
    transition: width 0.3s ease !important;
  }

  .collapse-btn {
    left: 55px !important;
    width: 10px;
    height: 30px;
    transform: all 0.3s;
    border-radius: 5px 0 0 5px !important;
  }

  /* 隐藏菜单文字 */
  :deep(.el-menu-item span),
  :deep(.el-sub-menu__title span) {
    display: none !important;
  }

  /* 隐藏子菜单箭头 */
  :deep(.el-sub-menu__title .el-sub-menu__icon-arrow) {
    display: none !important;
  }

  /* 调整图标间距 */
  :deep(.el-menu-item .el-icon),
  :deep(.el-sub-menu__title .el-icon) {
    margin-right: 0 !important;
  }
}</style>